<template>
  <div>
    <!-- 维修记录列表 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>设备维修记录</span>
        </div>
      </template>
      <el-table :data="maintenanceRecords" style="width: 100%" border>
        <el-table-column prop="maintenanceId" label="维修单号" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="maintenanceType" label="维修类型">
          <template #default="scope">
            {{ formatMaintenanceType(scope.row.maintenanceType) }}
          </template>
        </el-table-column>
        <el-table-column prop="maintenanceDate" label="维修日期" />
        <el-table-column prop="description" label="维修描述" />
        <el-table-column prop="cost" label="维修费用" />
        <el-table-column prop="maintenanceBy" label="维修服务商" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            {{ formatStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
                type="success"
                plain
                @click="confirmCompletion(scope.row.maintenanceId, scope.row.deviceId)"
                :disabled="scope.row.status === 'completed'"
            >
              确认完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt-20"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          v-model:current-page="currentPage"
          @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMaintenanceFinishApi, updateMaintenanceStatusApi } from '@/api/maintenance.js';

// 维修记录列表相关逻辑
const maintenanceRecords = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// 获取维修记录列表
const getMaintenanceRecords = async () => {
  try {
    const response = await getMaintenanceFinishApi({
      page: currentPage.value,
      pageSize: pageSize.value,
    });
    maintenanceRecords.value = response.data.list;
    total.value = response.data.total;
  } catch (error) {
    console.error(error);
    ElMessage.error('获取维修记录失败');
  }
};

// 格式化维修类型
const formatMaintenanceType = (type) => {
  const typeMap = {
    routine: '例行维护',
    repair: '故障维修',
    upgrade: '升级维护',
  };
  return typeMap[type] || type;
};

// 格式化状态
const formatStatus = (status) => {
  const statusMap = {
    pending: '待维修',
    in_progress: '进行中',
    completed: '已完成',
  };
  return statusMap[status] || status;
};

// 确认维修完成
const confirmCompletion = (maintenanceId, deviceId) => {
  ElMessageBox.confirm('确认该设备维修已完成？', '确认完成', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'info',
  })
      .then(async () => {
        try {
          await updateMaintenanceStatusApi({
            maintenanceId,
            deviceId,
            status: 'completed',
          });
          ElMessage.success('确认维修完成成功');
          // 刷新维修记录列表
          getMaintenanceRecords();
        } catch (error) {
          ElMessage.error('确认维修完成失败');
          console.error(error);
        }
      })
      .catch(() => {
        // 用户取消操作
      });
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  getMaintenanceRecords();
};

// 页面加载时获取维修记录
onMounted(() => {
  getMaintenanceRecords();
});
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.mt-20 {
  margin-top: 20px;
}
</style>
